<template>
	<md-card style="margin:8px 0;">
		<md-card-header md-alignment="space-between" style="display:flex;">
			<span
				class="md-title md-title-text"
				:title="markName+getLangText(label.markPoint)"
			>{{markName}}{{getLangText(label.markPoint)}}</span>
			<span style="flex:1;text-align:right;">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button :class="['md-icon-button',isShow?'md-primary':'']" @click="sendStyle">
					<i :class="['iconfont', isShow?'iconsave':'iconshezhi2']"></i>
				</md-button>
			</span>
		</md-card-header>
		<md-card-content v-if="isShow">
			<md-field>
				<label>{{getLangText(label.symbol)}}</label>
				<md-select v-model="markPoint.symbol">
					<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>

			<md-field>
				<label>{{getLangText(label.symbolSize)}}</label>
				<md-input v-model="markPoint.symbolSize"></md-input>
			</md-field>

			<md-field>
				<label>{{getLangText(label.symbolRotate)}}</label>
				<md-input v-model="markPoint.symbolRotate"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.markPoint)}}:</span>
				<span>
					<md-button class="md-icon-button" @click="addMarkPoint">
						<i class="iconfont iconadd"></i>
					</md-button>
				</span>
			</div>

			<div style="display:flex;align-items:center;" v-for="(item,idx) in markPoint.data" :key="idx">
				<md-field style="width:100px;display:inline-flex;">
					<label>{{getLangText(label.dataName)}}{{idx+1}}</label>
					<md-input v-model="markPoint.data[idx].name"></md-input>
				</md-field>

				<md-field style="width:100px;margin-left:8px;display:inline-flex;">
					<label>{{getLangText(label.dataType)}}{{idx+1}}</label>
					<md-select v-model="markPoint.data[idx].type">
						<md-option :key="item.en" :value="item.en" v-for="item in dataType">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
				<md-button class="md-icon-button" @click="delMarkPoint(idx)">
					<i class="iconfont iconshanchu"></i>
				</md-button>
			</div>
		</md-card-content>
	</md-card>
</template>
<script>
	export default {
		name: "MarkPoint",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			markName: {
				type: String,
				default: ""
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		data: () => ({
			label: {
				markPoint: { zh: "标注点", en: "MarkPoint" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				symbol: { zh: "标记图形", en: "symbol" },
				symbolSize: { zh: "标记大小", en: "symbolSize" },
				symbolRotate: { zh: "标记旋转", en: "symbolRotate" },
				dataName: { zh: "标注名称", en: "markName" },
				dataType: { zh: "标注类型", en: "markType" }
			},
			isShow: false,
			symbol: [
				{ zh: "无", en: "none" },
				{ zh: "空心圆形", en: "emptyCircle" },
				{ zh: "圆形", en: "circle" },
				{ zh: "方形", en: "rect" },
				{ zh: "圆角方形", en: "roundRect" },
				{ zh: "三角形", en: "triangle" },
				{ zh: "图钉", en: "pin" },
				{ zh: "箭头", en: "arrow" },
				{ zh: "钻石", en: "diamond" }
			],
			dataType: [
				{ en: "min", zh: "最小值" },
				{ en: "max", zh: "最大值" },
				{ en: "average", zh: "平均值" }
			],
			markPoint: {
				symbol: "pin",
				symbolSize: 50,
				symbolRotate: "",
				data: [{ name: "", type: "average" }],
				label:{
					show:true,
					color:'#FFF',
					position:'inside'
				}
			},
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}

			},
			markPoint:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("mark-point-result",JSON.parse(JSON.stringify( this.markPoint)));
				}
			}
		},
		methods: {
			addMarkPoint() {
				this.markPoint.data.push({ name: "", type: "average" });
			},
			delMarkPoint(idx) {
				this.markPoint.data.splice(idx, 1);
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("mark-point-result", JSON.parse(JSON.stringify(this.markPoint)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.markPoint[key] = this.option[key];
				}
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption(){
			if(this.isShow){
			this.isShow=false;
			this.$emit("mark-point-result", this.markPoint);
			}
			},
			listenEvent(){
				this.app.$on('close-option',this.colseOption);
			},
			offEvent(){
			this.app.$off('close-option',this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
			
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>
